diff --git a/index.html b/index.html
index 6e7f48f..441eb09 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CleanType - Modern Text Editor</title>
     
     <!-- Favicons -->
@@ -11,655 +11,9 @@
     <link rel="shortcut icon" href="/favicon.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/manifest.json" />
-    
-    <!-- Open Graph Meta Tags -->
-    <meta property="og:title" content="CleanType - Modern writing, minimalist thinking">
-    <meta property="og:description" content="A modern, distraction-free text editor for focused writing. Clean interface, fast performance, and beautiful design.">
-    <meta property="og:image" content="https://raw.githubusercontent.com/StarKnightt/cleantype/main/public/og-image.png">
-    <meta property="og:url" content="https://github.com/StarKnightt/cleantype">
-    <meta property="og:type" content="website">
-    
-    <!-- Twitter Card Meta Tags -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="CleanType - Modern writing, minimalist thinking">
-    <meta name="twitter:description" content="A modern, distraction-free text editor for focused writing. Clean interface, fast performance, and beautiful design.">
-    <meta name="twitter:image" content="https://raw.githubusercontent.com/StarKnightt/cleantype/main/public/og-image.png">
-    
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-        }
-
-        body {
-            background: #0f172a;
-            color: #f8fafc;
-            line-height: 1.6;
-            overflow-x: hidden;
-            cursor: none;
-        }
-
-        .cursor-fx {
-            position: fixed;
-            pointer-events: none;
-            z-index: 9999;
-        }
-
-        .cursor-main {
-            width: 8px;
-            height: 8px;
-            background: #60a5fa;
-            border-radius: 50%;
-            opacity: 0.8;
-        }
-
-        .cursor-trail {
-            width: 24px;
-            height: 24px;
-            border: 2px solid rgba(96, 165, 250, 0.5);
-            border-radius: 50%;
-            transition: transform 0.3s;
-        }
-
-        .svg-container {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -1;
-            pointer-events: none;
-        }
-
-        .morph-path {
-            fill: none;
-            stroke: rgba(255, 255, 255, 0.03);
-            stroke-width: 1;
-        }
-
-        .hero-svg {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 600px;
-            height: 600px;
-            opacity: 0.1;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 2rem;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            position: relative;
-        }
-
-        .hero {
-            text-align: center;
-            margin-bottom: 4rem;
-            position: relative;
-        }
-
-        .hero::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle at center, rgba(96, 165, 250, 0.1) 0%, transparent 50%);
-            transform: translate(-25%, -25%);
-            pointer-events: none;
-        }
-
-        h1 {
-            font-size: 4.5rem;
-            font-weight: 700;
-            margin-bottom: 1rem;
-            background: linear-gradient(135deg, #60a5fa, #a855f7);
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
-            -webkit-text-fill-color: transparent;
-            opacity: 0;
-            filter: blur(10px);
-            position: relative;
-        }
-
-        .subtitle {
-            font-size: 1.25rem;
-            color: #94a3b8;
-            max-width: 600px;
-            margin: 0 auto 2rem;
-            opacity: 0;
-        }
-
-        .download-section {
-            text-align: center;
-            margin-bottom: 4rem;
-            position: relative;
-        }
-
-        .download-button {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 0.5rem;
-            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
-            color: white;
-            padding: 1rem 2rem;
-            border-radius: 12px;
-            text-decoration: none;
-            font-weight: 500;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .download-button::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-            transition: 0.5s;
-        }
-
-        .download-button:hover::before {
-            left: 100%;
-        }
-
-        .download-button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
-        }
-
-        .features {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 2rem;
-            margin-bottom: 4rem;
-        }
-
-        .feature {
-            padding: 2rem;
-            background: rgba(255, 255, 255, 0.03);
-            border-radius: 16px;
-            border: 1px solid rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            transform: scale(0.9);
-            opacity: 0;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .feature::after {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-            opacity: 0;
-            transition: opacity 0.3s;
-            transform: translate(-50%, -50%);
-            pointer-events: none;
-        }
-
-        .feature:hover::after {
-            opacity: 1;
-        }
-
-        .feature h3 {
-            font-size: 1.25rem;
-            margin-bottom: 1rem;
-            color: #f8fafc;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .feature p {
-            color: #94a3b8;
-        }
-
-        .security-notice {
-            margin-top: 1rem;
-            padding: 1.5rem;
-            background: rgba(255, 247, 237, 0.03);
-            border: 1px solid rgba(254, 215, 170, 0.2);
-            border-radius: 12px;
-            font-size: 0.875rem;
-            color: #fed7aa;
-            max-width: 600px;
-            margin-left: auto;
-            margin-right: auto;
-            backdrop-filter: blur(10px);
-            transform: translateY(20px);
-            opacity: 0;
-        }
-
-        .footer {
-            text-align: center;
-            color: #64748b;
-            margin-top: auto;
-            padding-top: 2rem;
-            opacity: 0;
-        }
-
-        .footer a {
-            color: #60a5fa;
-            text-decoration: none;
-        }
-
-        .footer a:hover {
-            text-decoration: underline;
-        }
-
-        .button-note {
-            font-size: 0.75rem;
-            opacity: 0.8;
-        }
-
-        @media (max-width: 768px) {
-            .container {
-                padding: 1rem;
-            }
-
-            h1 {
-                font-size: 2.5rem;
-            }
-
-            .subtitle {
-                font-size: 1.1rem;
-            }
-        }
-
-        @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-20px); }
-            100% { transform: translateY(0px); }
-        }
-
-        .floating {
-            animation: float 6s ease-in-out infinite;
-        }
-
-        .github-section {
-            text-align: center;
-            margin: 2rem auto;
-            opacity: 0;
-            transform: translateY(20px);
-        }
-
-        .github-button {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.75rem;
-            background: rgba(255, 255, 255, 0.1);
-            color: #f8fafc;
-            padding: 0.75rem 1.5rem;
-            border-radius: 12px;
-            text-decoration: none;
-            font-weight: 500;
-            transition: all 0.3s ease;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-        }
-
-        .github-button:hover {
-            background: rgba(255, 255, 255, 0.15);
-            transform: translateY(-2px);
-            border-color: rgba(255, 255, 255, 0.2);
-        }
-
-        .github-button svg {
-            width: 24px;
-            height: 24px;
-            transition: transform 0.3s ease;
-        }
-
-        .github-button:hover svg {
-            transform: rotate(360deg) scale(1.1);
-        }
-
-        .star-count {
-            background: rgba(255, 255, 255, 0.1);
-            padding: 0.25rem 0.75rem;
-            border-radius: 20px;
-            font-size: 0.875rem;
-            transition: all 0.3s ease;
-        }
-
-        .github-button:hover .star-count {
-            background: rgba(255, 255, 255, 0.2);
-        }
-
-        @media (max-width: 768px) {
-            .github-button {
-                padding: 0.5rem 1rem;
-                font-size: 0.875rem;
-            }
-
-            .github-button svg {
-                width: 20px;
-                height: 20px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="cursor-fx cursor-main"></div>
-    <div class="cursor-fx cursor-trail"></div>
-
-    <div class="svg-container">
-        <svg class="hero-svg" viewBox="0 0 100 100">
-            <path class="morph-path" d="M10,50 Q50,10 90,50 T90,50" />
-            <path class="morph-path" d="M10,50 Q50,90 90,50 T90,50" />
-        </svg>
-        <svg class="hero-svg" viewBox="0 0 100 100" style="transform: rotate(60deg)">
-            <path class="morph-path" d="M10,50 Q50,10 90,50 T90,50" />
-            <path class="morph-path" d="M10,50 Q50,90 90,50 T90,50" />
-        </svg>
-        <svg class="hero-svg" viewBox="0 0 100 100" style="transform: rotate(-60deg)">
-            <path class="morph-path" d="M10,50 Q50,10 90,50 T90,50" />
-            <path class="morph-path" d="M10,50 Q50,90 90,50 T90,50" />
-        </svg>
-    </div>
-
-    <div class="container">
-        <div class="hero">
-            <h1>CleanType</h1>
-            <p class="subtitle">A modern, distraction-free text editor for focused writing</p>
-            <div class="download-section">
-                <a href="https://github.com/StarKnightt/cleantype/releases/download/v0.1.0/CleanType_0.1.0_x64-setup.exe" 
-                   class="download-button">
-                    Download CleanType
-                    <span class="button-note">Windows Installer (Recommended)</span>
-                </a>
-            </div>
-            <div class="security-notice">
-                <strong>⚠️ Windows SmartScreen Notice:</strong> Since this is a new application pending certification, 
-                Windows SmartScreen might show a warning. This is normal for new software. To proceed:
-                <br>1. Click "More info"
-                <br>2. Select "Run anyway"
-                <br>We're working on obtaining a code signing certificate to remove this warning.
-            </div>
-            <div class="github-section">
-                <a href="https://github.com/StarKnightt/CleanType" target="_blank" rel="noopener noreferrer" class="github-button">
-                    <svg viewBox="0 0 16 16" fill="currentColor">
-                        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
-                    </svg>
-                    Star on GitHub
-                    <span class="star-count">⭐</span>
-                </a>
-            </div>
-        </div>
-
-        <div class="features">
-            <div class="feature">
-                <h3>🎯 Distraction-Free</h3>
-                <p>Clean interface designed for focused writing sessions without unnecessary clutter.</p>
-            </div>
-            <div class="feature">
-                <h3>⚡ Fast & Efficient</h3>
-                <p>Built with Rust and Tauri for lightning-fast performance and minimal resource usage.</p>
-            </div>
-            <div class="feature">
-                <h3>🎨 Customizable</h3>
-                <p>Choose from various fonts, themes, and layouts to match your writing style.</p>
-            </div>
-        </div>
-
-        <footer class="footer">
-            <p>Made with ❤️ by <a href="https://github.com/StarKnightt">StarKnightt</a></p>
-        </footer>
-    </div>
-
-    <script>
-        // Optimized cursor animation
-        const cursorMain = document.querySelector('.cursor-main');
-        const cursorTrail = document.querySelector('.cursor-trail');
-        let mouseX = 0, mouseY = 0;
-        let cursorX = 0, cursorY = 0;
-        let trailX = 0, trailY = 0;
-        let speed = 0.15;
-
-        document.addEventListener('mousemove', (e) => {
-            mouseX = e.clientX;
-            mouseY = e.clientY;
-        });
-
-        function updateCursor() {
-            // Main cursor with physics
-            let dx = mouseX - cursorX;
-            let dy = mouseY - cursorY;
-            cursorX += dx * speed;
-            cursorY += dy * speed;
-            cursorMain.style.transform = `translate3d(${cursorX - 4}px, ${cursorY - 4}px, 0)`;
-
-            // Trail cursor with delayed following
-            let trailDx = mouseX - trailX;
-            let trailDy = mouseY - trailY;
-            trailX += trailDx * (speed * 0.5);
-            trailY += trailDy * (speed * 0.5);
-            cursorTrail.style.transform = `translate3d(${trailX - 12}px, ${trailY - 12}px, 0)`;
-
-            requestAnimationFrame(updateCursor);
-        }
-        updateCursor();
-
-        // Enhanced hover effects
-        document.querySelectorAll('a, .feature, .download-button').forEach(el => {
-            el.addEventListener('mouseenter', () => {
-                anime({
-                    targets: '.cursor-trail',
-                    scale: 1.5,
-                    duration: 600,
-                    easing: 'spring(1, 80, 10, 0)'
-                });
-            });
-
-            el.addEventListener('mouseleave', () => {
-                anime({
-                    targets: '.cursor-trail',
-                    scale: 1,
-                    duration: 600,
-                    easing: 'spring(1, 80, 10, 0)'
-                });
-            });
-        });
-
-        // SVG Morphing Animation with multiple paths
-        const morphPaths = document.querySelectorAll('.morph-path');
-        morphPaths.forEach((path, index) => {
-            anime({
-                targets: path,
-                d: [
-                    { value: 'M10,50 Q50,10 90,50 T90,50' },
-                    { value: 'M10,50 Q50,90 90,50 T90,50' },
-                    { value: 'M10,50 Q50,50 90,50 T90,50' }
-                ],
-                duration: 8000,
-                delay: index * 200,
-                easing: 'easeInOutSine',
-                loop: true,
-                direction: 'alternate'
-            });
-        });
-
-        // Enhanced timeline animations
-        const mainTimeline = anime.timeline({
-            easing: 'easeOutExpo'
-        });
-
-        mainTimeline
-        .add({
-            targets: '.hero h1',
-            opacity: [0, 1],
-            filter: ['blur(10px)', 'blur(0)'],
-            scale: [0.8, 1],
-            duration: 2000,
-            delay: 300
-        })
-        .add({
-            targets: '.hero .subtitle',
-            opacity: [0, 1],
-            translateY: [30, 0],
-            duration: 1200,
-            offset: '-=1800'
-        })
-        .add({
-            targets: '.download-button',
-            opacity: [0, 1],
-            translateY: [30, 0],
-            scale: [0.9, 1],
-            duration: 1200,
-            offset: '-=1000'
-        })
-        .add({
-            targets: '.security-notice',
-            opacity: [0, 1],
-            translateY: [30, 0],
-            duration: 1000,
-            offset: '-=800'
-        });
-
-        // Feature cards with physics-based animations
-        const features = document.querySelectorAll('.feature');
-        features.forEach((feature, index) => {
-            anime({
-                targets: feature,
-                translateY: [100, 0],
-                opacity: [0, 1],
-                scale: [0.8, 1],
-                delay: 1000 + (index * 200),
-                duration: 1500,
-                easing: 'spring(1, 80, 10, 0)'
-            });
-
-            // Interactive tilt effect with physics
-            feature.addEventListener('mousemove', (e) => {
-                const rect = feature.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const y = e.clientY - rect.top;
-                const centerX = rect.width / 2;
-                const centerY = rect.height / 2;
-                
-                const rotateX = ((y - centerY) / centerY) * -10;
-                const rotateY = ((x - centerX) / centerX) * 10;
-
-                anime({
-                    targets: feature,
-                    rotateX: rotateX,
-                    rotateY: rotateY,
-                    translateZ: 50,
-                    duration: 50,
-                    easing: 'linear'
-                });
-            });
-
-            feature.addEventListener('mouseleave', () => {
-                anime({
-                    targets: feature,
-                    rotateX: 0,
-                    rotateY: 0,
-                    translateZ: 0,
-                    duration: 1000,
-                    easing: 'spring(1, 80, 10, 0)'
-                });
-            });
-        });
-
-        // Download button effects
-        const downloadButton = document.querySelector('.download-button');
-        downloadButton.addEventListener('mouseenter', () => {
-            anime({
-                targets: downloadButton,
-                scale: 1.05,
-                duration: 500,
-                easing: 'spring(1, 80, 10, 0)'
-            });
-        });
-
-        downloadButton.addEventListener('mouseleave', () => {
-            anime({
-                targets: downloadButton,
-                scale: 1,
-                duration: 500,
-                easing: 'spring(1, 80, 10, 0)'
-            });
-        });
-
-        // Background gradient animation
-        anime({
-            targets: '.hero::before',
-            translateX: [-25, 25],
-            translateY: [-25, 25],
-            duration: 10000,
-            direction: 'alternate',
-            loop: true,
-            easing: 'easeInOutQuad'
-        });
-
-        // GitHub section animation
-        anime({
-            targets: '.github-section',
-            opacity: [0, 1],
-            translateY: [20, 0],
-            duration: 1000,
-            easing: 'spring(1, 80, 10, 0)',
-            delay: 1200
-        });
-
-        // Fetch GitHub stars count
-        async function updateStarCount() {
-            try {
-                const response = await fetch('https://api.github.com/repos/StarKnightt/CleanType');
-                const data = await response.json();
-                const starCount = document.querySelector('.star-count');
-                if (starCount && data.stargazers_count !== undefined) {
-                    starCount.textContent = `⭐ ${data.stargazers_count}`;
-                }
-            } catch (error) {
-                console.log('Error fetching star count:', error);
-            }
-        }
-        updateStarCount();
-
-        // Add hover effect for GitHub button
-        const githubButton = document.querySelector('.github-button');
-        githubButton.addEventListener('mouseenter', () => {
-            anime({
-                targets: '.github-button svg',
-                rotate: 360,
-                scale: 1.1,
-                duration: 600,
-                easing: 'spring(1, 80, 10, 0)'
-            });
-        });
-
-        githubButton.addEventListener('mouseleave', () => {
-            anime({
-                targets: '.github-button svg',
-                rotate: 0,
-                scale: 1,
-                duration: 600,
-                easing: 'spring(1, 80, 10, 0)'
-            });
-        });
-    </script>
-</body>
-</html>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html> 
\ No newline at end of file
diff --git a/landing.html b/landing.html
new file mode 100644
index 0000000..6e7f48f
--- /dev/null
+++ b/landing.html
@@ -0,0 +1,665 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CleanType - Modern Text Editor</title>
+    
+    <!-- Favicons -->
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.json" />
+    
+    <!-- Open Graph Meta Tags -->
+    <meta property="og:title" content="CleanType - Modern writing, minimalist thinking">
+    <meta property="og:description" content="A modern, distraction-free text editor for focused writing. Clean interface, fast performance, and beautiful design.">
+    <meta property="og:image" content="https://raw.githubusercontent.com/StarKnightt/cleantype/main/public/og-image.png">
+    <meta property="og:url" content="https://github.com/StarKnightt/cleantype">
+    <meta property="og:type" content="website">
+    
+    <!-- Twitter Card Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="CleanType - Modern writing, minimalist thinking">
+    <meta name="twitter:description" content="A modern, distraction-free text editor for focused writing. Clean interface, fast performance, and beautiful design.">
+    <meta name="twitter:image" content="https://raw.githubusercontent.com/StarKnightt/cleantype/main/public/og-image.png">
+    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+        }
+
+        body {
+            background: #0f172a;
+            color: #f8fafc;
+            line-height: 1.6;
+            overflow-x: hidden;
+            cursor: none;
+        }
+
+        .cursor-fx {
+            position: fixed;
+            pointer-events: none;
+            z-index: 9999;
+        }
+
+        .cursor-main {
+            width: 8px;
+            height: 8px;
+            background: #60a5fa;
+            border-radius: 50%;
+            opacity: 0.8;
+        }
+
+        .cursor-trail {
+            width: 24px;
+            height: 24px;
+            border: 2px solid rgba(96, 165, 250, 0.5);
+            border-radius: 50%;
+            transition: transform 0.3s;
+        }
+
+        .svg-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            pointer-events: none;
+        }
+
+        .morph-path {
+            fill: none;
+            stroke: rgba(255, 255, 255, 0.03);
+            stroke-width: 1;
+        }
+
+        .hero-svg {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 600px;
+            height: 600px;
+            opacity: 0.1;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            position: relative;
+        }
+
+        .hero {
+            text-align: center;
+            margin-bottom: 4rem;
+            position: relative;
+        }
+
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle at center, rgba(96, 165, 250, 0.1) 0%, transparent 50%);
+            transform: translate(-25%, -25%);
+            pointer-events: none;
+        }
+
+        h1 {
+            font-size: 4.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            background: linear-gradient(135deg, #60a5fa, #a855f7);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            -webkit-text-fill-color: transparent;
+            opacity: 0;
+            filter: blur(10px);
+            position: relative;
+        }
+
+        .subtitle {
+            font-size: 1.25rem;
+            color: #94a3b8;
+            max-width: 600px;
+            margin: 0 auto 2rem;
+            opacity: 0;
+        }
+
+        .download-section {
+            text-align: center;
+            margin-bottom: 4rem;
+            position: relative;
+        }
+
+        .download-button {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 0.5rem;
+            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+            color: white;
+            padding: 1rem 2rem;
+            border-radius: 12px;
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .download-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            transition: 0.5s;
+        }
+
+        .download-button:hover::before {
+            left: 100%;
+        }
+
+        .download-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
+        }
+
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+            margin-bottom: 4rem;
+        }
+
+        .feature {
+            padding: 2rem;
+            background: rgba(255, 255, 255, 0.03);
+            border-radius: 16px;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            transform: scale(0.9);
+            opacity: 0;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .feature::after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+            opacity: 0;
+            transition: opacity 0.3s;
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+        }
+
+        .feature:hover::after {
+            opacity: 1;
+        }
+
+        .feature h3 {
+            font-size: 1.25rem;
+            margin-bottom: 1rem;
+            color: #f8fafc;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .feature p {
+            color: #94a3b8;
+        }
+
+        .security-notice {
+            margin-top: 1rem;
+            padding: 1.5rem;
+            background: rgba(255, 247, 237, 0.03);
+            border: 1px solid rgba(254, 215, 170, 0.2);
+            border-radius: 12px;
+            font-size: 0.875rem;
+            color: #fed7aa;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+            backdrop-filter: blur(10px);
+            transform: translateY(20px);
+            opacity: 0;
+        }
+
+        .footer {
+            text-align: center;
+            color: #64748b;
+            margin-top: auto;
+            padding-top: 2rem;
+            opacity: 0;
+        }
+
+        .footer a {
+            color: #60a5fa;
+            text-decoration: none;
+        }
+
+        .footer a:hover {
+            text-decoration: underline;
+        }
+
+        .button-note {
+            font-size: 0.75rem;
+            opacity: 0.8;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+            }
+
+            h1 {
+                font-size: 2.5rem;
+            }
+
+            .subtitle {
+                font-size: 1.1rem;
+            }
+        }
+
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+            100% { transform: translateY(0px); }
+        }
+
+        .floating {
+            animation: float 6s ease-in-out infinite;
+        }
+
+        .github-section {
+            text-align: center;
+            margin: 2rem auto;
+            opacity: 0;
+            transform: translateY(20px);
+        }
+
+        .github-button {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.75rem;
+            background: rgba(255, 255, 255, 0.1);
+            color: #f8fafc;
+            padding: 0.75rem 1.5rem;
+            border-radius: 12px;
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+        }
+
+        .github-button:hover {
+            background: rgba(255, 255, 255, 0.15);
+            transform: translateY(-2px);
+            border-color: rgba(255, 255, 255, 0.2);
+        }
+
+        .github-button svg {
+            width: 24px;
+            height: 24px;
+            transition: transform 0.3s ease;
+        }
+
+        .github-button:hover svg {
+            transform: rotate(360deg) scale(1.1);
+        }
+
+        .star-count {
+            background: rgba(255, 255, 255, 0.1);
+            padding: 0.25rem 0.75rem;
+            border-radius: 20px;
+            font-size: 0.875rem;
+            transition: all 0.3s ease;
+        }
+
+        .github-button:hover .star-count {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        @media (max-width: 768px) {
+            .github-button {
+                padding: 0.5rem 1rem;
+                font-size: 0.875rem;
+            }
+
+            .github-button svg {
+                width: 20px;
+                height: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="cursor-fx cursor-main"></div>
+    <div class="cursor-fx cursor-trail"></div>
+
+    <div class="svg-container">
+        <svg class="hero-svg" viewBox="0 0 100 100">
+            <path class="morph-path" d="M10,50 Q50,10 90,50 T90,50" />
+            <path class="morph-path" d="M10,50 Q50,90 90,50 T90,50" />
+        </svg>
+        <svg class="hero-svg" viewBox="0 0 100 100" style="transform: rotate(60deg)">
+            <path class="morph-path" d="M10,50 Q50,10 90,50 T90,50" />
+            <path class="morph-path" d="M10,50 Q50,90 90,50 T90,50" />
+        </svg>
+        <svg class="hero-svg" viewBox="0 0 100 100" style="transform: rotate(-60deg)">
+            <path class="morph-path" d="M10,50 Q50,10 90,50 T90,50" />
+            <path class="morph-path" d="M10,50 Q50,90 90,50 T90,50" />
+        </svg>
+    </div>
+
+    <div class="container">
+        <div class="hero">
+            <h1>CleanType</h1>
+            <p class="subtitle">A modern, distraction-free text editor for focused writing</p>
+            <div class="download-section">
+                <a href="https://github.com/StarKnightt/cleantype/releases/download/v0.1.0/CleanType_0.1.0_x64-setup.exe" 
+                   class="download-button">
+                    Download CleanType
+                    <span class="button-note">Windows Installer (Recommended)</span>
+                </a>
+            </div>
+            <div class="security-notice">
+                <strong>⚠️ Windows SmartScreen Notice:</strong> Since this is a new application pending certification, 
+                Windows SmartScreen might show a warning. This is normal for new software. To proceed:
+                <br>1. Click "More info"
+                <br>2. Select "Run anyway"
+                <br>We're working on obtaining a code signing certificate to remove this warning.
+            </div>
+            <div class="github-section">
+                <a href="https://github.com/StarKnightt/CleanType" target="_blank" rel="noopener noreferrer" class="github-button">
+                    <svg viewBox="0 0 16 16" fill="currentColor">
+                        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+                    </svg>
+                    Star on GitHub
+                    <span class="star-count">⭐</span>
+                </a>
+            </div>
+        </div>
+
+        <div class="features">
+            <div class="feature">
+                <h3>🎯 Distraction-Free</h3>
+                <p>Clean interface designed for focused writing sessions without unnecessary clutter.</p>
+            </div>
+            <div class="feature">
+                <h3>⚡ Fast & Efficient</h3>
+                <p>Built with Rust and Tauri for lightning-fast performance and minimal resource usage.</p>
+            </div>
+            <div class="feature">
+                <h3>🎨 Customizable</h3>
+                <p>Choose from various fonts, themes, and layouts to match your writing style.</p>
+            </div>
+        </div>
+
+        <footer class="footer">
+            <p>Made with ❤️ by <a href="https://github.com/StarKnightt">StarKnightt</a></p>
+        </footer>
+    </div>
+
+    <script>
+        // Optimized cursor animation
+        const cursorMain = document.querySelector('.cursor-main');
+        const cursorTrail = document.querySelector('.cursor-trail');
+        let mouseX = 0, mouseY = 0;
+        let cursorX = 0, cursorY = 0;
+        let trailX = 0, trailY = 0;
+        let speed = 0.15;
+
+        document.addEventListener('mousemove', (e) => {
+            mouseX = e.clientX;
+            mouseY = e.clientY;
+        });
+
+        function updateCursor() {
+            // Main cursor with physics
+            let dx = mouseX - cursorX;
+            let dy = mouseY - cursorY;
+            cursorX += dx * speed;
+            cursorY += dy * speed;
+            cursorMain.style.transform = `translate3d(${cursorX - 4}px, ${cursorY - 4}px, 0)`;
+
+            // Trail cursor with delayed following
+            let trailDx = mouseX - trailX;
+            let trailDy = mouseY - trailY;
+            trailX += trailDx * (speed * 0.5);
+            trailY += trailDy * (speed * 0.5);
+            cursorTrail.style.transform = `translate3d(${trailX - 12}px, ${trailY - 12}px, 0)`;
+
+            requestAnimationFrame(updateCursor);
+        }
+        updateCursor();
+
+        // Enhanced hover effects
+        document.querySelectorAll('a, .feature, .download-button').forEach(el => {
+            el.addEventListener('mouseenter', () => {
+                anime({
+                    targets: '.cursor-trail',
+                    scale: 1.5,
+                    duration: 600,
+                    easing: 'spring(1, 80, 10, 0)'
+                });
+            });
+
+            el.addEventListener('mouseleave', () => {
+                anime({
+                    targets: '.cursor-trail',
+                    scale: 1,
+                    duration: 600,
+                    easing: 'spring(1, 80, 10, 0)'
+                });
+            });
+        });
+
+        // SVG Morphing Animation with multiple paths
+        const morphPaths = document.querySelectorAll('.morph-path');
+        morphPaths.forEach((path, index) => {
+            anime({
+                targets: path,
+                d: [
+                    { value: 'M10,50 Q50,10 90,50 T90,50' },
+                    { value: 'M10,50 Q50,90 90,50 T90,50' },
+                    { value: 'M10,50 Q50,50 90,50 T90,50' }
+                ],
+                duration: 8000,
+                delay: index * 200,
+                easing: 'easeInOutSine',
+                loop: true,
+                direction: 'alternate'
+            });
+        });
+
+        // Enhanced timeline animations
+        const mainTimeline = anime.timeline({
+            easing: 'easeOutExpo'
+        });
+
+        mainTimeline
+        .add({
+            targets: '.hero h1',
+            opacity: [0, 1],
+            filter: ['blur(10px)', 'blur(0)'],
+            scale: [0.8, 1],
+            duration: 2000,
+            delay: 300
+        })
+        .add({
+            targets: '.hero .subtitle',
+            opacity: [0, 1],
+            translateY: [30, 0],
+            duration: 1200,
+            offset: '-=1800'
+        })
+        .add({
+            targets: '.download-button',
+            opacity: [0, 1],
+            translateY: [30, 0],
+            scale: [0.9, 1],
+            duration: 1200,
+            offset: '-=1000'
+        })
+        .add({
+            targets: '.security-notice',
+            opacity: [0, 1],
+            translateY: [30, 0],
+            duration: 1000,
+            offset: '-=800'
+        });
+
+        // Feature cards with physics-based animations
+        const features = document.querySelectorAll('.feature');
+        features.forEach((feature, index) => {
+            anime({
+                targets: feature,
+                translateY: [100, 0],
+                opacity: [0, 1],
+                scale: [0.8, 1],
+                delay: 1000 + (index * 200),
+                duration: 1500,
+                easing: 'spring(1, 80, 10, 0)'
+            });
+
+            // Interactive tilt effect with physics
+            feature.addEventListener('mousemove', (e) => {
+                const rect = feature.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const centerX = rect.width / 2;
+                const centerY = rect.height / 2;
+                
+                const rotateX = ((y - centerY) / centerY) * -10;
+                const rotateY = ((x - centerX) / centerX) * 10;
+
+                anime({
+                    targets: feature,
+                    rotateX: rotateX,
+                    rotateY: rotateY,
+                    translateZ: 50,
+                    duration: 50,
+                    easing: 'linear'
+                });
+            });
+
+            feature.addEventListener('mouseleave', () => {
+                anime({
+                    targets: feature,
+                    rotateX: 0,
+                    rotateY: 0,
+                    translateZ: 0,
+                    duration: 1000,
+                    easing: 'spring(1, 80, 10, 0)'
+                });
+            });
+        });
+
+        // Download button effects
+        const downloadButton = document.querySelector('.download-button');
+        downloadButton.addEventListener('mouseenter', () => {
+            anime({
+                targets: downloadButton,
+                scale: 1.05,
+                duration: 500,
+                easing: 'spring(1, 80, 10, 0)'
+            });
+        });
+
+        downloadButton.addEventListener('mouseleave', () => {
+            anime({
+                targets: downloadButton,
+                scale: 1,
+                duration: 500,
+                easing: 'spring(1, 80, 10, 0)'
+            });
+        });
+
+        // Background gradient animation
+        anime({
+            targets: '.hero::before',
+            translateX: [-25, 25],
+            translateY: [-25, 25],
+            duration: 10000,
+            direction: 'alternate',
+            loop: true,
+            easing: 'easeInOutQuad'
+        });
+
+        // GitHub section animation
+        anime({
+            targets: '.github-section',
+            opacity: [0, 1],
+            translateY: [20, 0],
+            duration: 1000,
+            easing: 'spring(1, 80, 10, 0)',
+            delay: 1200
+        });
+
+        // Fetch GitHub stars count
+        async function updateStarCount() {
+            try {
+                const response = await fetch('https://api.github.com/repos/StarKnightt/CleanType');
+                const data = await response.json();
+                const starCount = document.querySelector('.star-count');
+                if (starCount && data.stargazers_count !== undefined) {
+                    starCount.textContent = `⭐ ${data.stargazers_count}`;
+                }
+            } catch (error) {
+                console.log('Error fetching star count:', error);
+            }
+        }
+        updateStarCount();
+
+        // Add hover effect for GitHub button
+        const githubButton = document.querySelector('.github-button');
+        githubButton.addEventListener('mouseenter', () => {
+            anime({
+                targets: '.github-button svg',
+                rotate: 360,
+                scale: 1.1,
+                duration: 600,
+                easing: 'spring(1, 80, 10, 0)'
+            });
+        });
+
+        githubButton.addEventListener('mouseleave', () => {
+            anime({
+                targets: '.github-button svg',
+                rotate: 0,
+                scale: 1,
+                duration: 600,
+                easing: 'spring(1, 80, 10, 0)'
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 62f3c0a..9a3f54f 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -93,4 +93,4 @@
       }
     ]
   }
-}
+}
\ No newline at end of file
